<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>聊天室</title>
	<link rel="stylesheet" type="text/css" href="/css/index.css"/>
</head>
<body>
	<div class="main">
		<div class="main-top">
			socket.io demo
		</div>
		<div class="main-body">
			<section class="chatRoomInfo">
				<div class="info">当前共有<span class="chatNum">0</span>人在线。在线列表:&nbsp;<span class="chatList"></span></div>
			</section>
		</div>
		<div class="main-footer clearfix">
			<div class="input">
				<input type="text" name="msg" id="msg" value="" />
			</div>
			<button type="button" class="send">发送</button>
		</div>
  </div>
  <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script src="/socket.io/socket.io.js" type="text/javascript" charset="utf-8"></script>
	<script>
		/*按钮点击效果*/
    $('.send').mousedown(function(){
      $(this).css({'background':"#007aff", 'color':"#ffffff"});
    })
    $('.send').mouseup(function(){
      $(this).css({'background':"#e8e8e8", 'color':"#ffffff"});
    })
		/*socket*/
    window.onload = function () {
      var username = prompt('请输入您的姓名');
      if (!username){
        alert('姓名必填');
        history.go(0);
      }
      userId = genUid();
      var userInfo = {
        'userid': userId,
        'username': username
			};
      //连接socket后端服务器
      var socket = io.connect('http://localhost:3010');
      //通知用户有用户登录
      socket.emit('login', userInfo);
      //监听新用户登录
			socket.on('login', function (o) {
        updateMsg(o, 'login');
      });
			//监听用户退出
      socket.on('logout',function (o) {
        updateMsg(o, 'logout');
      });
			//发送消息
			socket.on('message',function (obj) {
				if(obj.userid == userId) {
          var MsgHtml='<section class="user clearfix"><span>' + obj.username + '</span><div>' + obj.content + '</div></section>';
				} else {
          var MsgHtml='<section class="server clearfix"><span>' + obj.username + '</span><div>' + obj.content + '</div></section>';
				}
				$('.main-body').append(MsgHtml);
				$('.main-body').scrollTop(99999);
      })
			$('.send').click(function () {
				var content = $('input[name="msg"]').val();
				if (content){
          var obj = { 'userid': userId, 'username': username, 'content': content }
          socket.emit('message', obj);
          $('input[name="msg"]').val('');
				}
      })
    }
    /*用户id生成*/
    function genUid() {
      return new Date().getTime() + '' + Math.floor(Math.random() * 899 + 100);
    }
    function logout(){
      socket.disconnect();
      location.reload();
    }
    /*监听函数*/
    function updateMsg(o, action) {
      //当前在线列表
      var onlineUser = o.onlineUser;
      //当前在线数
      var onlineCount = o.onlineCount;
      //新加用户
      var user = o.user;
      //更新在线人数
      var userList = '';
      var separator = '';
      for(key in onlineUser){
        userList += separator + onlineUser[key];
        separator = '、';
      }
      //跟新房间信息
      $('.chatNum').text(onlineCount);
      $('.chatList').text(userList);
      //系统消息
      if(action === 'login'){
        var sysHtml='<section class="chatRoomTip"><div>'+user.username+'进入聊天室</div></section>';
      }
      if(action === "logout"){
        var sysHtml='<section class="chatRoomTip"><div>'+user.username+'退出聊天室</div></section>';
      }
      $(".main-body").append(sysHtml);
      $('.main-body').scrollTop(99999);
    }
	</script>
</body>
</html>
